<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>


<div id="app">
    <el-tree
            :data="treeData"
            show-checkbox
            node-key="id"
            default-expand-all
            :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
           <i class="el-icon-circle-plus" @click="add(node,data)"></i>
      </span>
    </el-tree>


    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            >

        <input type="text" v-model="formData.name">
        <br>
        <input type="text" v-model="formData.linkUrl">

        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="doAdd">确 定</el-button>
  </span>
    </el-dialog>


</div>

<script src="vue.js"></script>
<script src="index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>

    new Vue({
        el:"#app"
        ,data:{
            dialogVisible:false,
            formData:{},
            treeData:[

                // {id:1,label:"一级菜单1",children:[
                //         {id:11,label:"一级菜单1-1",children:[]},
                //         {id:12,label:"一级菜单1-2",children:[]},
                //     ]},
                // {id:2,label:"一级菜单2",children:[
                //         {id:21,label:"一级菜单2-1",children:[]}
                //     ]},
                // {id:3,label:"一级菜单3",children:[]},
                // {id:4,label:"一级菜单4",children:[]},
                // {id:5,label:"一级菜单5",children:[]},
            ]
        },
        created(){
            axios.get("/user/findAllMenu.do").then((res)=>{
                this.treeData = res.data.data;
            })
        },
        methods:{
            add(node,data){
                this.formData.parentMenuId = data.id;
                //弹出新增框架
                this.dialogVisible = true;
            },
            doAdd(){
                console.log(this.formData);
            }
        }
    })


</script>
</body>
</html>
